<template>
  <div id="login">
		<transition appear appear-active-class="fade">
		  		<div class="container">
		<form class="login-form">
			<div class="toptip">注册</div>
			<input type="text" placeholder="用户名" v-model="username" maxlength="20" @input="ValidUsername">
			<p v-show="usernameTip">不能包含非法字符,且不能为空</p>
			<p v-show="exitUsername">该用户名存在,请重新选择</p>
			<input type="password" placeholder="密码" v-model="password" maxlength="20">
			<p v-show="passwordTip">不能为空</p>
			<input type="password" placeholder="确认密码" v-model="againPassword" maxlength="20">
			<p v-show="againPasswordTip">两次密码不同</p>
			<button @click.prevent="register">
				<span v-show="registerTip">注册</span>
				<img v-show="registerLoading" src="../../assets/loading-svg/loading-spokes.svg" alt="" height="32px">
				<span v-show="registerSuccess">注册成功，点击下方按钮进行登录</span>
				<span v-show="registerError" style="color:red">注册失败</span>
			</button>
			<button @click.prevent="$router.push('/login')">返回登录</button>
		</form>
		</div>
		</transition>
  </div>
</template>

<script>
// import BG from './bg'
export default {
	components:{
		// BG
	},
	data(){
		return {
			username:"",
			password:"",
			againPassword:"",
			usernameTip:false,
			registerLoading:false,
			passwordTip:false,
			againPasswordTip:false,
			registerTip:true,
			CanRegister:false,
			registerSuccess:false,
			registerError:false,
			exitUsername:false
		}
	},
	methods: {
		ValidUsername(){
			if(/\W/g.test(this.username)){
				this.usernameTip=true
			}else{
				this.usernameTip=false
			}
		},
		register(){
			this.registerLoading=true
			this.registerTip=false
			if(this.password!==this.againPassword){
				this.againPasswordTip=true
				this.registerLoading=false
				this.registerTip=true
				return
			}else if((this.password==="")||(this.username==="")){
				this.passwordTip=true
				this.usernameTip=true
				this.registerTip=true
				this.registerLoading=false
				return 
			}else{
				this.$axios.post("/user/register",{
				username:this.username,
				password:this.password,
				realname:this.username
			}).then(res=>{
				console.log(res);
				if(res.data.error===0){
				this.exitUsername=true
				this.registerLoading=false
				setTimeout(()=>{
					this.registerError=false
					this.registerTip=true
				},2000)
				this.registerError=true
				}else{
					this.username="",
					this.password="",
					this.againPassword=""
				this.registerLoading=false
				this.registerSuccess=true
				}
			})
			}
		}
	},

}
</script>

<style lang="less" scoped>
		.fade{
			opacity: 0;
			animation: leave .5s linear  ;
		}	
		@keyframes leave{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
	.container{
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-sizing: content-box;	

	}
	@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
.toptip{
	font-family: advice;
	font-size: 35px;
}
	.login-form{
		// border-radius: 15px;
		width: 400px;
		height: 300px;
		display: flex;
		flex-direction: column;
		padding: 40px;
		text-align: center;
		position: relative;
		z-index: 100;
		overflow: hidden;
	}
	.login-form p{
		color: red;
		font-size: 12px;
		text-align: center;
	}
	.login-form::before{
		content: "";
		// border-radius: 15px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.25);
		position: absolute;
		top: -10px;
		left: 4px;
		z-index: -1;
		filter: blur(6px);
		overflow: hidden;
		}
		.login-form h2{
			font-size: 18px;
			font-weight: 400;
			color: #333;
		}

		.login-form input,.login-form button{
			margin:6px 0;
			height:36px;
			border: none;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 4px;
			padding: 0 14px;
			color: #333;
		}
		.login-form input::placeholder{
			color: #3d5245;
		}
		.login-form button{
			margin-top: 8px;
			background-color: rgba(57, 88, 69, .4);
			color:white;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: 0.4s;
		}
		.login-form button:hover{
			background-color: rgba(12, 80, 38, 0.67);

		}

		.login-form button::before,.login-form button::after{
			content:"";
			display: block;
			width: 80px;
			height: 100%;
			background-color: rgba(179, 255, 210,0.5);
			opacity: 0.5;
			position: absolute;
			left:0;
			top: 0;
			transform: skewX(-15deg);
			filter: blur(30px);
			overflow: hidden;
			transform: translateX(-100px);
		}
		.login-form button::after{
			width: 40px;
			background-color: rgba(179, 255, 210, 0.3);
			left:60px;
			filter: blur(5px);
			opacity: 0;
		}
		.login-form button:hover::before{
			transition: 1s;
			transform: translateX(320px);
			opacity: 0.7;
		}
		.login-form button:hover::after{
			transition: 1s;
			transform: translateX(320px);
			opacity: 1;
		}
</style>